<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<style type="text/css">
			div{
				margin: 20px;
			}
			/*认为是一个整体然后打断*/
			.test1{
				border: 1px solid #ccc;
				width: 100px;
				height: 300px;
				word-break: break-all;
			}
			/*认为一个单词，将一个词打断*/
			.test2{
				border: 1px solid #ccc;
				width: 100px;
				height: 300px;
				word-wrap: break-word;
			}
			/*换行*/
			.test4{
				border: 1px solid #ccc;
				width: 100px;
				height: 300px;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp:5;
				 -webkit-box-orient: vertical;			
			}
			/*多行的文字换行*/
		</style>
		<div class="test1">
			文字阴影文字阴影 文字阴影文字阴影文字阴影 文字阴影文字阴影文字阴影 文字阴影文字阴影文字阴影 文字阴影文字阴影文字阴影
		</div>
		<div class="test2">
			文字阴影文字阴影 文字阴影文字阴影文字阴影 文字阴影文字阴影文字阴影 文字阴影文字阴影文字阴影 文字阴影文字阴影文字阴影
		</div>

		<div class="test3">
			文字阴影文字阴影 文字阴影文字阴影文字阴影 文字阴影文字阴影文字阴影 文字阴影文字阴影文字阴影 文字阴影文字阴影文字阴影
		</div>
		<p class="test4">文字阴影文字阴影 文字阴影文字阴影文字阴影 文字阴影文字阴影文字阴影 文字阴影文字阴影文字阴影 文字阴影文字阴影文字阴影</p>
	</body>
</html>
